<script lang="ts" setup>
  import WHeader from '@/components/BasicHeader/index.vue';
  import tabbar from './tabbar.vue';
  import home from '../footer/index/index.vue';
  import news from '../footer/news/index.vue';
  import about from '../footer/about/index.vue';
  import activity from '../footer/activity/index.vue';
  import shopping from '../footer/shopping/index.vue';
  import { getTabbar } from '@/services/api/menus';
  import { h, ref, onMounted, computed } from 'vue';
  const currentTab = ref('home');
  const tabList = ref<Array<tabbarModel>>([]);

  onMounted(async () => {
    uni.$on('tabClick', tabChange);
    const rows = await getTabbar(null);
    tabList.value = rows.data;
  });

  const tabChange = (e: any) => {
    currentTab.value = e;
  };

  const currentPage =
    computed<tabbarModel>(() => {
      return tabList.value.filter((e: tabbarModel) => {
        return e.name == currentTab.value;
      })[0];
    }) || {};
</script>

<template>
  <div class="page-header bg-primary" v-if="currentPage?.show_header == '1' ? 1 : 0">
    <w-header :title="currentPage.title">
      <div class="header-text font-600 color-white" slot="content">{{ currentPage.title }}</div>
    </w-header>
  </div>
  <div class="page-show" style="height: calc(100vh - 60px)">
    <div class="page-content" min-h-full>
      <home v-if="currentTab == 'home'" />
      <news v-if="currentTab == 'classify'" />
      <about v-if="currentTab == 'account'" />
      <activity v-if="currentTab == 'activity'" />
      <shopping v-if="currentTab == 'shopping'" />
    </div>
    <tabbar :tabList="tabList"></tabbar>
  </div>
</template>

<style lang="scss" scoped>
  .page-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: #ffffffc9;
  }
  .page-show {
    margin-bottom: 50px;
  }
</style>
